<template>
  <div class="video-container">
    <el-dialog title="添加Banner" :visible.sync="dialogVisible" width="30%">
      <el-form
        label-position="left"
        label-width="100px"
        :model="bannerForm"
        :rules="rules"
        ref="bannerForm"
      > 
        <el-form-item   prop="videoName" label="视频名称：">
          <el-input :disabled="true" v-model="bannerForm.videoName" placeholder="请输入内容"></el-input>
        </el-form-item>
        <el-form-item prop="coverImg" label="封面：">
          <AvatarImg
            :imageUrl="bannerForm.coverImg"
            @success="handleAvatarSuccess"
          />
        </el-form-item>
        <el-form-item prop="title" label="标题：">
          <el-input clearable :maxlength="10" :minlength="1" v-model="bannerForm.title" placeholder="请输入标题"></el-input>
        </el-form-item>
        <el-form-item prop="sort" label="排序">
          <el-input-number
            :disabled="formType === 1"
            v-model="bannerForm.sort"
            :min="1"
            label="描述文字"
          ></el-input-number>
        </el-form-item>
        <el-form-item prop="status" label="状态">
          <el-switch
            :disabled="formType === 1"
            v-model="bannerForm.status"
            active-value="0"
            inactive-value="1"
            active-color="#13ce66"
            inactive-color="#ff4949"
          ></el-switch>
        </el-form-item>
      </el-form>
      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button
          v-if="formType !== 1"
          :loading="loading"
          type="primary"
          @click="confirmHandel('bannerForm')"
          >确 定</el-button
        >
      </span>
    </el-dialog>
    <el-row>
      <el-col :span="6">
        类别:

        <el-cascader
          placeholder="请选择类别"
          :options="categoryOptions"
          v-model="category"
          @change="categoryChange"
          :props="{ checkStrictly: true, label: 'name', value: 'id' }"
          clearable
        ></el-cascader>
      </el-col>
      <el-col :span="6">
        状态:
        <el-select v-model="params.isRelease" clearable placeholder="请选择">
          <el-option
            v-for="item in videoDramaSeriesStatus"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          >
          </el-option>
        </el-select>
      </el-col>
      <el-col :span="10">
        <el-button type="primary" @click="params = {}">重置</el-button>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="getPaginationVideos()"
          >查询</el-button
        >
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <el-table :data="pagination.videoDatas" row-key="id" border>
          <el-table-column type="index" width="30px"></el-table-column>
          <el-table-column prop="name" label="名称"></el-table-column>
          <el-table-column prop="author" label="作者"></el-table-column>
          <el-table-column prop="isRelease" label="状态">
            <template slot-scope="scope">
              <el-tag
                :type="scope.row.isRelease === '0' ? 'success' : 'danger'"
                disable-transitions
                >{{ scope.row.isRelease === "0" ? "已发布" : "未发布" }}</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="操作" fixed="right" width="250px">
            <template slot-scope="scope">
              <el-button
                @click="handleClick(scope.row.id)"
                type="text"
                size="small"
                >详情</el-button
              >
              <el-button
                v-if="scope.row.isRelease == '0'"
                slot="reference"
                type="text"
                size="small"
                @click="checkAddBanner(scope.row)"
                >添加为Banner</el-button
              >
              <el-popconfirm
                @onConfirm="delVideo(scope.row.id)"
                :title="'确定删除' + scope.row.name + '视频吗？'"
                style="margin-left: 10px"
              >
                <el-button slot="reference" type="text" size="small"
                  >删除</el-button
                >
              </el-popconfirm>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="22">
        <el-pagination
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="pagination.currentPage"
          :page-sizes="pagination.pageSizeChoose"
          :page-size="pagination.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="pagination.total"
        ></el-pagination>
      </el-col>
      <el-col :span="2">
        <el-button type="primary" @click="handleClick(null)">新增</el-button>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import AvatarImg from "@/components/ImgUpload/AvatarImg";
import { getPaginationList } from "@/api/video/info";
import { getCategoryList } from "@/api/video/category";
import { add } from "@/api/video/banner";
export default {
  name: "Video",
  components: { AvatarImg },
  created() {
    this.getPaginationVideos();
    this.getDictList({ type: "video_drama_series_status" }).then((res) => {
      this.videoDramaSeriesStatus = res.data;
    });
    getCategoryList().then((v) => {
      this.categoryOptions = v.data;
    });
  },
  watch:{
    dialogVisible: function () {
    if (this.dialogVisible === false) {
      this.$refs["bannerForm"].resetFields();
    }
  },
  },
  data() {
    return {
      loading: false,
      bannerForm: {
        videoName: "",
        videoId: null,
        title: "",
        coverImg: "",
        sort: 1,
        status: "0",
      },
      rules: {
        title: [{ required: true, message: "请输入标题", trigger: "blur" }],
        coverImg: [
          { required: true, message: "请上传封面图片", trigger: "blur" },
        ],
      },
      categoryOptions: [],
      category: [],
      params: {},
      videoDramaSeriesStatus: [],
      dialogTitle: "",
      formType: "",
      dialogVisible: false,
 
      pagination: {
        currentPage: 1,
        pageSize: 10,
        pageSizeChoose: [5, 10, 15, 20],
        total: 0,
        videoDatas: [],
      },

    };
  },
  methods: {
    checkAddBanner(video){
      this.bannerForm.videoName = video.name
      this.bannerForm.videoId = video.id
      this.dialogVisible = true

    },
    handleAvatarSuccess(url) {
      this.bannerForm.coverImg = url;
    },
    addBanner() {
      this.loading = true;
      add(this.bannerForm)
        .then(() => {
          this.$message({
            message: "新增成功",
            type: "success",
          });
          this.dialogVisible = false;
          this.loading = false;
          this.getPaginationBanners();
        })
        .catch(() => {
          this.loading = false;
        });
    },
    confirmHandel(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.addBanner();
          this.loading = false;
        }
      });
    },
    categoryChange(value) {
      if (value.length > 0) {
        this.params.categoryParentId = value[0];
        if (this.category.length == 2) {
          this.params.categoryId = value[1];
        }
      } else {
        this.params.categoryParentId = null;
        this.params.categoryId = null;
      }
      console.log(this.params);
    },
    getPaginationVideos() {
      if (this.params.isRelease == "") {
        this.params.isRelease = null;
      }
      (this.params.pageSize = this.pagination.pageSize),
        (this.params.pageIndex = this.pagination.currentPage),
        getPaginationList(this.params).then((res) => {
          this.pagination.videoDatas = res.data.records;
          this.pagination.total = res.data.total;
        });
    },
    handleSizeChange(val) {
      this.pagination.pageSize = val;
      this.getPaginationVideos();
    },
    handleCurrentChange(val) {
      this.pagination.currentPage = val;
      this.getPaginationVideos();
    },
    handleClick(id) {
      this.$router.push({
        path: "/video/detail",
        query: { id: id },
      });
    },
  },
};
</script>

<style lang="scss" scoped>
</style>